import React, { useState,useEffect } from 'react'
import { useSelector,useDispatch } from 'react-redux'
import { loadDataAsync } from '../actionCreater'
import { useHistory } from 'react-router-dom'
import { ActionSheet } from 'antd-mobile'

import Header from '@c/header/Header'
import PersonalInfoUi from '../ui/PersonalInfoUi'
import useGetState from './useGetState'
import useGoToPersonal from './useGoToPersonal'


const PersonalInfo = (props) => {
    const {list} = useSelector(state => state.personalInfo)
    let [ state,setState ] = useState(
        
    )

    const dispatch = useDispatch()
    console.log(state);
    
    const history = useHistory()
    
    useEffect((props) => {
        dispatch(loadDataAsync())
    },[dispatch])
    
    
    const handleInfoClick = name => {
        return () => {
            history.push('/name', { name })
        }
    }
    
    const handleImgClick = img => {
        return () => {
            history.push('/portrait', { img })
        }
    }
    
    const handleEmerClick = () => {
        return () => {
            history.push('/emergency')
        }
    }
    
    const handleAccountClick = () => {
        return () => {
            history.push('/account')
        }
    }
    const handleQRcodeClick = img => {
        return () => {
            history.push('/qrcode', { img })
        }
    }
    
    
    const showActionSheet = props => {
        return () => {
            const BUTTONS = props;
            ActionSheet.showActionSheetWithOptions({
                options: BUTTONS,
                cancelButtonIndex: BUTTONS.length - 1,
                // destructiveButtonIndex: BUTTONS.length - 2,
                maskClosable: true,
            },
                (buttonIndex) => {
                    if (buttonIndex === BUTTONS.length - 1) return
                    switch (props[0]) {
                        case '男':
                            setState({ sex: BUTTONS[buttonIndex] });
                            break;
                        case '1年以内':
                            setState({ teaching: BUTTONS[buttonIndex] });
                            break;
                        case '教师':
                            setState({ position: BUTTONS[buttonIndex] });
                            break;
                        default:
                            break;
                    }
                });
        }
    }

    // const { state } = useGetState()
    // const { handleAccountClick,handleEmerClick,handleImgClick,handleInfoClick,handleQRcodeClick,showActionSheet } = useGoToPersonal()
    return (
        <div>
            <Header title="个人信息"></Header>
            <PersonalInfoUi
                list={list}
                onInfoClick={handleInfoClick}
                onImgClick={handleImgClick}
                onEmerClick={handleEmerClick}
                onAccountClick={handleAccountClick}
                onQRcodeClick={handleQRcodeClick}
                onBtnClick={showActionSheet}
            ></PersonalInfoUi>
        </div>
    )
}

export default PersonalInfo
